<!--
 * @Author: 黄达全
 * @Date: 2024-07-29 17:15:10
 * @LastEditTime: 2024-07-29 17:15:18
-->
<script lang="ts" setup>
import { ref, reactive } from 'vue'

// 顶部统计数据
const statisticsData = reactive([
    { label: '分销员人数(人)', value: 21, icon: 'User' },
    { label: '订单数(单)', value: 238, icon: 'ShoppingCart' },
    { label: '订单金额(元)', value: 15863.25, icon: 'Money' },
    { label: '提现次数(次)', value: 43, icon: 'Wallet' }
])

// 时间选择
const timeSelected = ref('全部')
const timeOptions = ['全部', '今天', '昨天', '最近7天']

// 表格数据
const tableData = reactive([
    {
        id: 248,
        avatar: 'https://shop-admin-hdq.oss-cn-beijing.aliyuncs.com/8b422907-f896-49bf-abee-be1ba29a52b2.jpg',
        user_info: {
            username: 'zhangsan',
            nickname: '张三的小店',
            real_name: '张三',
            phone: '13812345678'
        },
        promo_users: 12,
        order_count: 56,
        order_amount: 2980.50,
        account_commission: 298.05,
        withdrawn_amount: 250.00,
        withdrawal_count: 2,
        unwithdrawn_amount: 48.05
    },
    {
        id: 222,
        avatar: 'https://shop-admin-hdq.oss-cn-beijing.aliyuncs.com/268f7139-6c94-4dfb-bf64-8c2d05584bbd.jpg',
        user_info: {
            username: 'wuyong',
            nickname: '吴用的生活馆',
            real_name: '吴用',
            phone: '13987654321'
        },
        promo_users: 8,
        order_count: 42,
        order_amount: 3650.75,
        account_commission: 365.08,
        withdrawn_amount: 365.08,
        withdrawal_count: 3,
        unwithdrawn_amount: 0.00
    },
    {
        id: 220,
        avatar: 'https://shop-admin-hdq.oss-cn-beijing.aliyuncs.com/398b6189-828e-4e9a-ad94-33ed28eeb904.jpg',
        user_info: {
            username: 'wuyanzhuo',
            nickname: '时尚潮流馆',
            real_name: '吴彦卓',
            phone: '15698765432'
        },
        promo_users: 15,
        order_count: 87,
        order_amount: 7290.40,
        account_commission: 729.04,
        withdrawn_amount: 700.00,
        withdrawal_count: 2,
        unwithdrawn_amount: 29.04
    },
    {
        id: 219,
        avatar: 'https://shop-admin-hdq.oss-cn-beijing.aliyuncs.com/063a0d3d-15ad-432a-b1c3-ad4838a87d29.jpg',
        user_info: {
            username: 'zhaoyun',
            nickname: '赵云优选',
            real_name: '赵云',
            phone: '14584545113'
        },
        promo_users: 6,
        order_count: 32,
        order_amount: 1256.80,
        account_commission: 125.68,
        withdrawn_amount: 100.00,
        withdrawal_count: 1,
        unwithdrawn_amount: 25.68
    },
    {
        id: 216,
        avatar: 'https://shop-admin-hdq.oss-cn-beijing.aliyuncs.com/40101330-fbb3-4f13-b55a-2d5b447b71fd.jpg',
        user_info: {
            username: 'liubei',
            nickname: '刘备的小铺子',
            real_name: '刘备',
            phone: '13243457654'
        },
        promo_users: 9,
        order_count: 45,
        order_amount: 3865.00,
        account_commission: 386.50,
        withdrawn_amount: 350.00,
        withdrawal_count: 1,
        unwithdrawn_amount: 36.50
    }
])

// 搜索功能
const search = () => {
    console.log('搜索')
}

// 重置
const reset = () => {
    console.log('重置')
}

// 推广人
const promoteUser = (row: any) => {
    console.log('推广人', row)
}

// 推广订单
const promoteOrder = (row: any) => {
    console.log('推广订单', row)
}

const total=ref(100)
const pageSize=ref(10)
</script>

<template>
    <div class="distribution-container">
        <!-- 顶部统计卡片 -->
        <div class="statistics-cards">
            <el-card v-for="(item, index) in statisticsData" :key="index" class="statistic-card" shadow="hover">
                <div class="statistic-content">
                    <div class="statistic-icon">
                        <el-icon :size="32"><component :is="item.icon" /></el-icon>
                    </div>
                    <div class="statistic-info">
                        <div class="statistic-value">{{ item.value }}</div>
                        <div class="statistic-label">{{ item.label }}</div>
                    </div>
                </div>
            </el-card>
        </div>

        <el-card class="card" :body-style="{ padding: '10px 10px 0 10px' }">
            <template #header>
                <div class="filter-section">
                    <div class="time-filter">
                        <span class="filter-label">时间选择</span>
                        <div class="time-buttons">
                            <el-button v-for="option in timeOptions" :key="option"
                                :type="timeSelected === option ? 'primary' : ''" size="small"
                                :color="timeSelected === option ? 'var(--primary-theme-color)' : ''"
                                @click="timeSelected = option">
                                {{ option }}
                            </el-button>
                        </div>
                    </div>

                    <div class="right-buttons">
                        <el-button type="primary" size="small" color="var(--primary-theme-color)" 
                            icon="el-icon-Search" @click="search">搜索</el-button>
                        <el-button size="small" icon="el-icon-Refresh" @click="reset">重置</el-button>
                    </div>
                </div>
            </template>

            <!-- 分销员表格 -->
            <div class="card-body">
                <el-table :data="tableData" style="width:99.5%" stripe border>
                    <el-table-column prop="id" label="ID" width="80" />

                    <el-table-column label="头像" width="80">
                        <template #default="scope">
                            <el-avatar :src="scope.row.avatar" size="small" />
                        </template>
                    </el-table-column>

                    <el-table-column label="用户信息" width="180">
                        <template #default="scope">
                            <div class="user-info">
                                <div>用户：{{ scope.row.user_info.username }}</div>
                                <div v-if="scope.row.user_info.nickname">昵称：{{ scope.row.user_info.nickname }}</div>
                                <div v-if="scope.row.user_info.real_name">姓名：{{ scope.row.user_info.real_name }}</div>
                                <div v-if="scope.row.user_info.phone">电话：{{ scope.row.user_info.phone }}</div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="promo_users" label="推广用户数量" />
                    <el-table-column prop="order_count" label="订单数量" />
                    <el-table-column prop="order_amount" label="订单金额" />
                    <el-table-column prop="account_commission" label="账户佣金" />
                    <el-table-column prop="withdrawn_amount" label="已提现金额" />
                    <el-table-column prop="withdrawal_count" label="提现次数" />
                    <el-table-column prop="unwithdrawn_amount" label="未提现金额" />

                    <el-table-column label="操作" width="180">
                        <template #default="scope">
                            <el-button type="primary" link color="var(--primary-theme-color)" 
                                icon="User" @click="promoteUser(scope.row)">推广人</el-button>
                            <el-button type="primary" link color="var(--primary-theme-color)" 
                                icon="ShoppingCart" @click="promoteOrder(scope.row)">推广订单</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination size="small" background layout="prev, pager, next" :total="total"
                        :page-size="pageSize"  />
                </div>
            </div>
        </el-card>
    </div>
</template>

<style lang="scss" scoped>
.distribution-container {
    .statistics-cards {
        display: flex;
        margin-bottom: 20px;
        gap: 20px;
        
        .statistic-card {
            flex: 1;
            border-radius: 10px;
            
            .statistic-content {
                display: flex;
                align-items: center;
                
                .statistic-icon {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    background-color: rgba(var(--primary-theme-color-rgb), 0.1);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 15px;
                    color: var(--primary-theme-color);
                }
                
                .statistic-info {
                    flex: 1;
                    
                    .statistic-value {
                        font-size: 28px;
                        font-weight: bold;
                        margin-bottom: 5px;
                        color: #303133;
                    }
                    
                    .statistic-label {
                        color: #909399;
                        font-size: 14px;
                    }
                }
            }
        }
    }

    .filter-section {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .time-filter {
            display: flex;
            align-items: center;

            .filter-label {
                margin-right: 10px;
                color: #606266;
            }

            .time-buttons {
                display: flex;
                gap: 10px;
            }
        }

        .right-buttons {
            display: flex;
            gap: 10px;
        }
    }

    .user-info {
        font-size: 14px;
        line-height: 1.5;

        div {
            margin-bottom: 2px;
        }
    }
}

.card-body {
    height: 100%;
    display: flex;
    flex-direction: column;

    .user-table {
        flex: 1;
        overflow-y: scroll;

        &::-webkit-scrollbar {
            width: 0;
        }
    }

    .pagination {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}


:deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: var(--primary-theme-color) !important;
    color: #FFFFFF;
}
</style>
